<template>
  <div class="QuartzJobList">
    <!-- 搜索 -->
    <div>
      <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
        <el-form-item label="任务类名：">
          <el-input v-model="ruleForm.jobClassName" placeholder="请输入完整任务类名"></el-input>
        </el-form-item>
        <el-form-item label="任务状态：">
          <el-select v-model="ruleForm.status_dictText" placeholder="请选择状态">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="正常" value="正常"></el-option>
            <el-option label="停止" value="停止"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="upSubmit()">重置</el-button>
        </el-form-item>
      
      </el-form>
    </div>
    <!-- 新增按钮 -->
    <div>
      <el-button @click="dialogFormVisibleaddd"  class="buttonadd" type="primary"><i class="el-icon-plus"></i>&nbsp;新增</el-button>
    </div>
    <!-- 列表数据 -->
    <div>
      <el-table
        class="dropdown"
        ref="filterTable"
        border
        :data="header"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column align="center" label="#" type="index" width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobClassName"
          label="任务类名"
          sortable
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="cronExpression"
          label="cron表达式"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="parameter"
          label="参数"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="description"
          label="描述"
          width="220"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="status"
          label="标签"
          width="100"
          :filters="[
            { text: '已暂停', value: -1 },
            { text: '已启动', value: 0 },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status == -1 ? 'primary' : 'success'"
              v-if="scope.row.status == -1"
              disable-transitions
              >已暂停</el-tag
            >
            <el-tag
              :type="scope.row.status == -1 ? 'primary' : 'success'"
              v-if="scope.row.status == 0"
              disable-transitions
              >已启动</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status_dictText == '正常'"
              @click="change(scope.row)"
              type="text"
              size="small"
              >停止</el-button
            >
            <el-button
              v-if="scope.row.status_dictText == '停止'"
              @click="change(scope.row)"
              type="text"
              size="small"
              >启动</el-button
            >
            <el-dropdown>
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="orderAcceptView(scope.row)"
                  >立即执行</el-dropdown-item
                >
                <el-dropdown-item @click.native="redact(scope.row)"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item>
                  <el-popover placement="top" width="160" :ref="'popover-'+scope.$index">
  <p>这是一段内容这是一段内容确定删除吗？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="closePopover(scope.$index)">取消</el-button>
    <el-button type="primary" size="mini" 
    @click="handleDelete(scope.$index, scope.row);closePopover(scope.$index)">确认</el-button>
  </div>
  <div slot="reference" type="danger" size="mini" @click="openPopover(scope.$index)" plain>
删除</div>
</el-popover>
</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="correctional()"
          >保存并安排任务</el-button
        >
      </div>

      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="任务类名" prop="jobClassName">
          <el-input v-model="ruleForm.jobClassName"></el-input>
        </el-form-item>
        <el-form-item label="cron表达式">
          <i class="el-icon-document-checked"></i>
          <el-input
            class="cron"
            clearable
            placeholder="cron表达式"
            v-model="ruleForm.cronExpression"
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="参数">
          <el-input
            type="textarea"
            v-model="ruleForm.parameter"
            :autosize="{ minRows: 5, maxRows: 5 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            type="textarea"
            v-model="ruleForm.description"
            :autosize="{ minRows: 3, maxRows: 3 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-button-group class="two">
            <el-button
              :class="[dictText ? 'blue' : 'whtie']"
              @click="state"
              type="primary"
              >正常</el-button
            >
            <el-button
              :class="[dictText ? 'whtie' : 'blue']"
              @click="stata"
              type="primary"
              >停止</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="dialogFormVisibleadd">
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleadd = false">关闭</el-button>
        <el-button type="primary" @click="newaddd"
          >保存并安排任务</el-button
        >
      </div>

      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="任务类名" prop="jobClassName">
          <el-input v-model="ruleForm.jobClassName"></el-input>
        </el-form-item>
        <el-form-item label="cron表达式">
          <i class="el-icon-document-checked"></i>
          <el-input
            class="cron"
            clearable
            placeholder="* * * * * ? *"
            v-model="ruleForm.cronExpression"
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="参数">
          <el-input
            type="textarea"
            v-model="ruleForm.parameter"
            :autosize="{ minRows: 5, maxRows: 5 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            type="textarea"
            v-model="ruleForm.description"
            :autosize="{ minRows: 3, maxRows: 3 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-button-group class="two">
            <el-button
              :class="[dictText ? 'blue' : 'whtie']"
              @click="state"
              type="primary"
              >正常</el-button
            >
            <el-button
              :class="[dictText ? 'whtie' : 'blue']"
              @click="stata"
              type="primary"
              >停止</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
</template>
<script>
import {
  quartzJob,
  quartzJobResume,
  quartzJobExecute,
  edit,
  deleteid,
  quartzJobliston,
  newaddall
} from "@/api/api-huang/gateway";
export default {
  name: "QuartzJobList",
  data() {
    return {
      visible:false,//删除弹框显示状态
      dictText: false, //状态-停止/正常
      dialogFormVisible: false, //编辑开关
      dialogFormVisibleadd:false,//新增开关
      ruleForm: {
        status:"",//0和-1
        jobClassName: "", //任务类名
        cronExpression: "", //"* * * L-1 * ? *"
        parameter: "", //参数
        description: "", //描述
        status_dictText: "", //状态
      }, //编辑内容
      rules: {
        jobClassName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      }, //编辑验证
      formLabelWidth: "120px",
      tag: "", //启动，暂停
      
      header: [], //列表数据
    };
  },
  mounted() {
    let _self = this;
    _self.quartzJobNow();
  },
  methods: {
    //请求数据
    quartzJobNow() {
      quartzJob().then((ref) => {
        let _self = this;
        _self.header = ref.result.records;
      });
    },
    //列表
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.status === value;
    },
    //启动按钮
    change(row) {
      let _self = this;
      if (row.status_dictText == "正常") {
        _self.tag = "暂停";
      } else {
        _self.tag = "启动";
      }
      this.$confirm("是否" + _self.tag + "选中任务", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        _self.quartzJobResumeadd(row.jobClassName);
      });
    },
    quartzJobResumeadd(a) {
      let data = {
        jobClassName: a,
      };
      quartzJobResume(data).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "warning",
            message: res.message,
          });
        }
      });
    },
    //立即执行按钮
    orderAcceptView(row) {
      let _self = this;
      this.$confirm("是否立即执行任务", "确认提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // _self.executedata=row.id
        _self.quartzJobExecuterun(row.id);
      });
    },

    //立即执行接口
    quartzJobExecuterun(a) {
      let _self = this;
      let data = {
        id: a,
      };
      quartzJobExecute(data).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "warning",
            message: res.message,
          });
        }
      });
    },
    //编辑
    redact(row) {
      let _self = this;
      _self.dialogFormVisible = true;
      _self.ruleForm.jobClassName = row.jobClassName;
      _self.ruleForm.cronExpression = row.cronExpression;
      _self.ruleForm.parameter = row.parameter;
      _self.ruleForm.description = row.description;
      _self.ruleForm.status_dictText = row.status_dictText;
      _self.ruleForm.createBy=row.createBy;
      _self.ruleForm.createTime=row.createTime;
      _self.ruleForm.delFlag=row.delFlag;
      _self.ruleForm.id=row.id;
      _self.ruleForm.status=row.status;
      _self.ruleForm.updateBy=row.updateBy;
      _self.ruleForm.updateTime=row.updateTime;
      if (row.status_dictText == "正常") {
        _self.dictText = true;
      } else {
        _self.dictText = false;
      }
      console.log(row);
    },
    state() {
      let _self = this;
      _self.ruleForm.status_dictText = "停止";
      _self.ruleForm.status=0
      if (_self.ruleForm.status_dictText == "停止") {
        _self.dictText = true;
      } else {
        _self.dictText = false;
      }
    },
    stata() {
      let _self = this;
      _self.ruleForm.status_dictText = "正常";
      _self.ruleForm.status=-1
      if (_self.ruleForm.status_dictText == "停止") {
        _self.dictText = true;
      } else {
        _self.dictText = false;
      }
    },
    //编辑提交
    correctional(){
      let _self = this; 
      _self.editcorr();
      console.log(_self.ruleForm.status_dictText)
    },
    //编辑接口
    editcorr(){
      let _self = this;
      let data = _self.ruleForm
      edit(data).then((res) => {
        console.log(res)
        _self.quartzJobNow();
        _self.dialogFormVisible = false;
        this.$message({
          message: res.message,
          type: 'success'
        });
      })
    },

    //弹框
    openPopover(index){
        //doShow这是一个方法,但是不知道为什么不能加()，否则不起作用
        this.$refs['popover-' + index].doShow;
       
        // this.$refs.index.doShow();
      },
      closePopover(index){
        //一脸懵逼,doClose居然需要加(),否则不起作用
        this.$refs['popover-' + index].doClose();
      },
          //删除
   handleDelete($index,row){
    let _self = this;
    let a=row.id
    _self.deleteidcorr(a)
    _self.closePopover($index)
    },
    //删除接口
    deleteidcorr(a){
      let _self = this;
      let data={
        id:a
      }
      deleteid(data).then((res)=>{
        _self.quartzJobNow();
      })
    },
    //查询
    onSubmit(){
      let _self=this;
      _self.quartzJoblistonthis()
    },
    //查询接口
    quartzJoblistonthis(){
      let _self= this;
      if(_self.ruleForm.status_dictText=="正常"){
        _self.ruleForm.status=0
      }else if(_self.ruleForm.status_dictText=="停止"){
        _self.ruleForm.status=-1
      }else if(_self.ruleForm.status_dictText=="全部"){
        _self.ruleForm.status=""
      }
      let data = {
        jobClassName:_self.ruleForm.jobClassName,
        status:_self.ruleForm.status
      };
      quartzJobliston(data).then((res)=>{
        _self.header=res.result.records
      })
    },
    //重置按钮
    upSubmit(){
      let _self = this;
      _self.ruleForm.jobClassName="",
      _self.ruleForm.status_dictText=""
    _self.quartzJobNow();
    },
    //新增按钮
    dialogFormVisibleaddd(){
      let _self=this;
      _self.ruleForm.cronExpression="",
       _self.ruleForm.description="",
        _self.ruleForm.jobClassName="",
      _self.ruleForm.parameter="",
      _self.ruleForm.status="";
      _self.dialogFormVisibleadd=true
    },
    //新增接口
    newaddd(){
      let _self = this;
    
      let data={
        cronExpression:_self.ruleForm.cronExpression,
        description:_self.ruleForm.description,
        jobClassName:_self.ruleForm.jobClassName,
        parameter:_self.ruleForm.parameter,
        status:_self.ruleForm.status,
      }
      newaddall(data).then((res)=>{
        _self.dialogFormVisibleadd=false;
        _self.quartzJobNow();
      })
    }
  },
};
</script>
<style lang="less">
.QuartzJobList{
  .el-dialog__body{padding: 3% 5%;};
}
.QuartzJobList .cell .el-dropdown {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
  margin-left: 3px;
  padding-left: 4px;
  border-left: 1px solid rgba(153, 153, 153, 0.497);
}
.QuartzJobList .el-icon-document-checked {
  position: absolute;
  font-size: 20px;
  line-height: 40px;
  z-index: 100;
  padding-left: 5px;
}
.cron .el-input__inner {
  padding-left: 30px;
}
.two .el-button {
  padding: 8px 20px;
}
.blue {
  background-color: #409eff;
  border-color: #409eff;
}
.whtie {
  background-color: #fff;
  border-color: #dcdfe6;
  color: black;
}
.buttonadd{
  margin-bottom: 20px;
  width: 100px;
}
</style>